<template>
	<view class="setting-page">
		
		<!-- 个人资料 -->
		<view class="setting-section">
			<view class="setting-item" @click="goToProfile">
				<view class="item-left">
					<image src="https://www.shuyunpt.com/app/image/setting/user.png" class="item-icon"></image>
					<text class="item-text">个人资料</text>
				</view>
				<view class="item-right">
					<text class="item-desc">{{ userInfo.nickname || '未设置' }}</text>
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="setting-item" @click="goToAgreement('用户协议')">
				<view class="item-left">
					<image src="https://www.shuyunpt.com/app/image/setting/agreement.png" class="item-icon"></image>
					<text class="item-text">用户协议</text>
				</view>
				<view class="item-right">
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="setting-item" @click="goToAgreement('隐私协议')">
				<view class="item-left">
					<image src="https://www.shuyunpt.com/app/image/setting/privacy.png" class="item-icon"></image>
					<text class="item-text">隐私协议</text>
				</view>
				<view class="item-right">
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="setting-item" @click="goToAccountDeletion()">
				<view class="item-left">
					<image src="https://www.shuyunpt.com/app/image/setting/logout.png" class="item-icon"></image>
					<text class="item-text">账户注销</text>
				</view>
				<view class="item-right">
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
		</view>
		
		
		
		<!-- 退出登录 -->
		<view class="logout-section">
			<button class="logout-btn" @click="showLogoutConfirm">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				appVersion: '1.0.0'
			}
		},
		onLoad() {
			this.getUserInfo();
			this.getAppVersion();
		},
		methods: {
					// 获取用户信息
		getUserInfo() {
			const userInfo = this.$store.state.qxInfo;
			if (userInfo) {
				this.userInfo = userInfo;
			}
		},
			
			// 获取应用版本
			getAppVersion() {
				// #ifdef APP-PLUS
				plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
					this.appVersion = widgetInfo.version;
				});
				// #endif
				
				// #ifdef MP-WEIXIN
				const accountInfo = uni.getAccountInfoSync();
				this.appVersion = accountInfo.miniProgram.version || '1.0.0';
				// #endif
			},
			
			// 跳转到个人资料
			goToProfile() {
				uni.navigateTo({
					url: '/pages/profile/index'
				});
			},
			
			// 跳转到账户安全
			goToSecurity() {
				uni.navigateTo({
					url: '/pages/security/index'
				});
			},
			
			// 跳转到协议页面
			goToAgreement(title) {
				uni.navigateTo({
					url: `/pages/login/agree?title=${title}`
				});
			},
			
			// 跳转到关于我们
			goToAbout() {
				uni.navigateTo({
					url: '/pages/about/index'
				});
			},
			
			// 跳转到账户注销页面
			goToAccountDeletion() {
				uni.navigateTo({
					url: '/pages/setting/account-deletion'
				});
			},
			
			// 显示退出登录确认框
			showLogoutConfirm() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					confirmText: '确定',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							this.logout();
						}
					}
				});
			},
			
			// 退出登录
			logout() {
				try {
					// 清除本地存储的用户信息
					this.$store.commit('logout');
					
					// 显示退出成功提示
					this.$hint.desc('退出登录成功');
					
					// 跳转到登录页面
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index'
						});
					}, 1500);
					
				} catch (error) {
					console.error('退出登录失败:', error);
					this.$hint.desc('退出登录失败，请重试');
				}
			}
		}
	}
</script>

<style scoped>
	.setting-page {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 40rpx;
		position: relative;
	}
	
	.page-header {
		background-color: #ffffff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
	}
	
	.setting-section {
		margin-top: 20rpx;
		background-color: #ffffff;
	}
	
	.section-title {
		padding: 20rpx 30rpx 10rpx;
		font-size: 28rpx;
		color: #999999;
		font-weight: 500;
	}
	
	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		background-color: #ffffff;
	}
	
	.setting-item:last-child {
		border-bottom: none;
	}
	
	.item-left {
		display: flex;
		align-items: center;
	}
	
	.item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	
	.item-text {
		font-size: 32rpx;
		color: #333333;
	}
	
	.item-right {
		display: flex;
		align-items: center;
	}
	
	.item-desc {
		font-size: 28rpx;
		color: #999999;
		margin-right: 10rpx;
	}
	
	.logout-section {
		position: fixed;
		bottom: 20%;
		left: 0;
		right: 0;
		padding: 0 30rpx;
		z-index: 10;
	}
	
	.logout-btn {
		width: 100%;
		height: 88rpx;
		background-color: #5C65FF;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bold;
		border-radius: 44rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.logout-btn::after {
		border: none;
	}
	
	.logout-btn:active {
		background-color: #4A52E8;
		transform: scale(0.98);
	}
</style> 